<template>
  <PageWrapper
    contentClass="flex"
    style="justify-content: center; padding: 20px"
    contentFullHeight
    dense
    fixedHeight
  >
    <a-card>
      <div class="text-2xl font-bold" style="width: 200px; margin: 10px auto">{{
        t('sys.menu.menuList.OperationManual')
      }}</div>
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel
          v-if="rolesListID?.roleId == 1"
          key="1"
          :header="tDemo('operationManual.dataOverview')"
        >
          <a-image class="m-auto" width="100%" :src="img1" />
        </a-collapse-panel>
        <a-collapse-panel key="2" :header="tDemo('operationManual.permissionManagement')">
          <div>
            <div class="text-lg font-bold my-2">{{
              tDemo('operationManual.accountManagement')
            }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img2" />
            </div>
          </div>
          <div>
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.addAccount') }}</div>

            <div>
              <a-image class="m-auto" width="100%" :src="img3" />
            </div>
          </div>
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.roleManagement') }}</div>

            <div>
              <a-image class="m-auto" width="100%" :src="img4" />
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel
          v-if="rolesListID?.roleId == 1"
          key="3"
          :header="tDemo('operationManual.scriptManagement')"
        >
          <div>
            <div class="text-lg font-bold my-2">{{
              tDemo('operationManual.scriptManagement')
            }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img5" />
            </div>
          </div>
          <div>
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.addScript') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img6" />
            </div>
          </div>
        </a-collapse-panel>
        <a-collapse-panel key="4" :header="tDemo('operationManual.facebook')">
          <div>
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.dataManagement') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img7" />
            </div>
          </div>
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{
              tDemo('operationManual.bindDataToAccount')
            }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img8" />
            </div>
          </div>
          <div>
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.dataDetail') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img9" />
            </div>
          </div>
          <div v-if="currentLocale === 'en'">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.setAnnotation') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img23" />
            </div>
          </div>
          <div>
            <div class="text-lg font-bold my-2">{{
              tDemo('operationManual.imageDescription')
            }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img10" />
            </div>
          </div>
          <a-divider v-if="rolesListID?.roleId == 1" />
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{
              tDemo('operationManual.deviceManagement')
            }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img11" />
            </div>
          </div>
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.setDevice') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img12" />
            </div>
          </div>
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.configureScript') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img13" />
            </div>
          </div>
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{
              tDemo('operationManual.configureCommand')
            }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img14" />
            </div>
          </div>
          <a-divider v-if="rolesListID?.roleId == 1" />
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.commandConfig') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img15" />
            </div>
          </div>
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.addCommand') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img16" />
            </div>
          </div>
          <a-divider v-if="rolesListID?.roleId == 1" />
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{
              tDemo('operationManual.exceptionManagement')
            }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img17" />
            </div>
          </div>
          <a-divider v-if="rolesListID?.roleId == 1 || rolesListID?.roleId == 2" />
          <div v-if="rolesListID?.roleId == 1 || rolesListID?.roleId == 2">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.taskManagement') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img18" />
            </div>
          </div>
          <div v-if="rolesListID?.roleId == 1 || rolesListID?.roleId == 2">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.taskRecord') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img19" />
            </div>
          </div>
          <div v-if="rolesListID?.roleId == 1 || rolesListID?.roleId == 2">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.addTask') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img20" />
            </div>
          </div>
          <a-divider v-if="rolesListID?.roleId == 1" />
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{
              tDemo('operationManual.accountManagement')
            }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img21" />
            </div>
          </div>
          <div v-if="rolesListID?.roleId == 1">
            <div class="text-lg font-bold my-2">{{ tDemo('operationManual.addAccount') }}</div>
            <div>
              <a-image class="m-auto" width="100%" :src="img22" />
            </div>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </a-card>
  </PageWrapper>
</template>

<script setup>
  import { ref, computed, unref } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useLocale } from '@/locales/useLocale';

  // 导入所有图片
  import img1 from '@/assets/operation/微信图片_20251014143401.png';
  import img2 from '@/assets/operation/微信图片_20251014144616.png';
  import img3 from '@/assets/operation/微信图片_20251014144744.png';
  import img4 from '@/assets/operation/微信图片_20251014150331.png';
  import img5 from '@/assets/operation/微信图片_20251014150931.png';
  import img6 from '@/assets/operation/微信图片_20251014151226.png';
  import img7 from '@/assets/operation/微信图片_20251014152634.png';
  import img8 from '@/assets/operation/微信图片_20251014152940.png';
  import img9 from '@/assets/operation/微信图片_20251014154201.png';
  import img10 from '@/assets/operation/微信图片_20251014155535.png';
  import img11 from '@/assets/operation/微信图片_20251014161024.png';
  import img12 from '@/assets/operation/微信图片_20251014161433.png';
  import img13 from '@/assets/operation/微信图片_20251014161947.png';
  import img14 from '@/assets/operation/微信图片_20251014162219.png';
  import img15 from '@/assets/operation/微信图片_20251014163029.png';
  import img16 from '@/assets/operation/微信图片_20251014163337.png';
  import img17 from '@/assets/operation/微信图片_20251014164535.png';
  import img18 from '@/assets/operation/微信图片_20251014165625.png';
  import img19 from '@/assets/operation/微信图片_20251014165901.png';
  import img20 from '@/assets/operation/微信图片_20251014170023.png';
  import img21 from '@/assets/operation/微信图片_20251014170509.png';
  import img22 from '@/assets/operation/微信图片_20251014170643.png';
  import img23 from '@/assets/operation/微信图片_20251121182109.png';

  const { t } = useI18n();
  const { t: tDemo } = useI18n('routes.demo');
  const { getLocale } = useLocale();
  const currentLocale = computed(() => unref(getLocale));
  const activeKey = ref(1);
  const rolesList = JSON.parse(localStorage.getItem('rolesList'));
  const rolesListID = rolesList.find((item) => item.roleId === 1);
</script>
<style lang="less" scoped>
  .hover-change-color:hover {
    color: #1890ff; /* 这是Ant Design默认的主色调蓝色 */
    text-decoration: underline; /* 可选：添加下划线增强视觉反馈 */
  }
</style>
